<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getCommunityList } from '@/api/community';
import { Community } from '@/api/community/type';
import { router } from '@/router';
import { showNotify } from 'vant';

const communityList = ref([] as Community[]);
const loading = ref(true);

onMounted(async () => {
    try {
        const res = await getCommunityList();
        communityList.value = res.data || [];
    } catch (error) {
        console.error('加载推荐社区失败:', error);
        showNotify({
            type: 'danger',
            message: '加载推荐社区失败',
            position: 'top'
        });
    } finally {
        loading.value = false;
    }
})

const navigateToCommunity = (item: Community) => {
    router.push({
        name: "CommunityHome",
        query: {
            'id': item.id
        }
    });
}
</script>

<template>
    <div class="recommended-communities">
        <div class="section-header">
            <h2 class="section-title">
                <van-icon name="fire-o" class="section-icon" />
                推荐社区
            </h2>
        </div>
        
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
            <van-loading size="24px" vertical>加载中...</van-loading>
        </div>
        
        <!-- 空状态 -->
        <div v-else-if="communityList.length === 0" class="empty-container">
            <van-empty description="暂无推荐社区" />
        </div>
        
        <!-- 社区列表 -->
        <div v-else class="community-list">
            <div
                v-for="community in communityList"
                :key="community.id"
                class="community-list-item"
                @click="navigateToCommunity(community)"
            >
                <div class="community-info">
                    <van-image
                        class="community-list-avatar"
                        :src="community.url"
                        fit="cover"
                        radius="8"
                    />
                    <div class="community-list-details">
                        <div class="community-list-name">{{ community.name }}</div>
                        <div class="community-list-description">{{ community.description || '暂无社区介绍' }}</div>
                    </div>
                </div>
                <van-button
                    size="small"
                    type="primary"
                    plain
                    class="join-btn"
                >
                    查看
                </van-button>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.recommended-communities {
    background-color: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        
        .section-title {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: #323233;
            display: flex;
            align-items: center;
            
            .section-icon {
                margin-right: 8px;
                font-size: 20px;
            }
        }
    }
    
    .loading-container,
    .empty-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 150px;
    }
    
    .community-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        
        .community-list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            border-radius: 8px;
            background-color: #f8f8f8;
            cursor: pointer;
            transition: all 0.2s;
            
            &:hover {
                background-color: #f2f3f5;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            
            .community-info {
                display: flex;
                align-items: center;
                flex: 1;
                min-width: 0;
                
                .community-list-avatar {
                    width: 48px;
                    height: 48px;
                    margin-right: 12px;
                    flex-shrink: 0;
                }
                
                .community-list-details {
                    flex: 1;
                    min-width: 0;
                    
                    .community-list-name {
                        font-size: 16px;
                        font-weight: 500;
                        color: #323233;
                        margin-bottom: 4px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    
                    .community-list-description {
                        font-size: 14px;
                        color: #969799;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
            
            .join-btn {
                flex-shrink: 0;
            }
        }
    }
}
</style>